import React,{ Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    ScrollView,
    Dimensions
} from 'react-native';

const dimen = Dimensions.get('window');
const deviceWidth = dimen.width;

/**
 * tab组件头部
 * props    data    tab列表
 * props    style   样式
 * props    index   默认选中的序号
 * props    onChange    选中
 */
export default class TabToggle extends React.Component {
    static defaultProps = {
        data: [],
        index: -1,
        onChange: () => { },
    }
    constructor(props) {
        super(props);
        this.state = {
            index:0,
        }
        this.scroll = null;
        this.laout_list = []
        this.scrollW = 0;
    }
    render() {
        const {isTwoItems}=this.props;
        const length = this.props.data.length;
        return (
            <View style={[tabBarStyle.tab, this.props.style]}>
                <ScrollView ref={e => this.scroll = e}
                            horizontal directionalLockEnabled
                            showsHorizontalScrollIndicator={false}
                            snapToAlignment="center">
                    {this.props.data.map((item, index) =>
                        <TouchableOpacity onPress={() => this.setIndex(index)} onClick={() => this.setIndex(index)}
                                          onLayout={e => this.setLayout(e.nativeEvent.layout, index)}
                                          key={index} style={[tabBarStyle.itemBtn,
                            this.state.index === index ? tabBarStyle.active2 : null,
                            {width:isTwoItems ? deviceWidth*.5:deviceWidth/length}]}>
                            <Text style={[tabBarStyle.item, this.state.index === index ? tabBarStyle.active : null]} > {item.name}</Text>
                        </TouchableOpacity> )
                    }
                </ScrollView>
            </View>
        )
    }
    scroll = null;
    laout_list = []
    scrollW = 0;
    shouldUpdate = true;
    shouldComponentUpdate() {
        if (!this.shouldUpdate) return false;
        return !(this.shouldUpdate = false);
    }
    renderItems(item,index){
        const isNotWin=BrowserUtil.versions.isMobile();

        let events=isNotWin ? {onPress:this.setIndex.bind(this,index)}:{onClick:this.setIndex.bind(this,index)};
        return  (
            <TouchableOpacity {...events}
                              onLayout={e => this.setLayout(e.nativeEvent.layout, index)}
                              key={index} style={[tabBarStyle.itemBtn,
                this.state.index === index ? tabBarStyle.active2 : null,
                {width:GlobalConstant.width*(this.props.number)}]} ref={`tab${index}`}>
                <Text style={[tabBarStyle.item, this.state.index === index ? tabBarStyle.active : null]} > {item.name}</Text>
            </TouchableOpacity>
        )
    }
    componentWillReceiveProps(pp) {
        if (pp.index !== this.props.index) {
            this.setState({ index: pp.index })
            setTimeout(() => {
                this.setIndex(pp.index, false);
            }, 200);
        }
    }
    setLayout(layout, index) {
        this.laout_list[index] = layout;
        this.scrollW += layout.width;
    }

    setIndex(index, bl = true) {
        this.setState({ index })
        if (!this.scroll) return;
        let layout = this.laout_list[index];
        let rx = deviceWidth / 2;
        let sx = layout.x - rx + layout.width / 2;
        if (sx < 0) sx = 0;
        sx < this.scrollW - deviceWidth && this.scroll.scrollTo({ x: sx, animated: bl });
        sx >= this.scrollW - deviceWidth && this.scroll.scrollToEnd({ animated: bl });
        this.props.onChange && this.props.onChange(index);
        this.shouldUpdate = true;
    }
}
const tabBarStyle = StyleSheet.create({
    tab: {
        backgroundColor: '#FFF',
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "center",
        height: 40
    },

    itemBtn: {
        paddingHorizontal: 15,
        height: 40,
        flexDirection: 'column',
        justifyContent: "center",
        alignItems: "center",
        borderBottomColor: '#D4D7DA',
        borderBottomWidth:1
    },
    item: {
        color: "#333",
    },
    active: {
        color: "#FF6A00"
    },
    active2: {
        borderBottomColor: '#FF6A00',
        borderBottomWidth:2
    },
    sortimg: {
        width: 55,
        height: 40,
    }
});